<template>
    <div>
        <div>
            <select name="type" v-model="searchData.type">
                <option value="name">姓名</option>
                <option value="phone">电话号码</option>
            </select>
            <input type="text" v-model="searchData.value"/>
        </div>
        <el-table id="tabel" :data="allCustomers" stripe border style="width: 100%">
            <el-table-column
                prop="_id"
                label="用户编号"
                width="250"
            ></el-table-column>
            <el-table-column prop="name" label="用户姓名"></el-table-column>
            <el-table-column prop="account" label="用户帐号"></el-table-column>
            <el-table-column prop="password" label="用户密码"></el-table-column>
            <el-table-column prop="phone" label="用户电话">
            </el-table-column>
            <el-table-column prop="salesmansId.name" label="负责人">
            </el-table-column>
            
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="delCustomers(scope.row._id)">删除</el-button>
                    <el-button size="mini" @click="saveCustomer(scope.row)">修改</el-button>
                    <el-dialog title="修改数据" :visible.sync="dialogFormVisible">
                        <el-form :model="customer">
                            <el-form-item label="客户姓名" :label-width="formLabelWidth">
                                <el-input v-model="customer.name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="客户id" :label-width="formLabelWidth">
                                <el-input v-model="customer._id" autocomplete="off" readonly></el-input>
                            </el-form-item>
                            <el-form-item label="客户帐号" :label-width="formLabelWidth">
                                <el-input v-model="customer.account" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="客户密码" :label-width="formLabelWidth">
                                <el-input type="password" v-model="customer.password" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="客户手机" :label-width="formLabelWidth">
                                <el-input v-model="customer.phone" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="sureAlter(scope.row)">确 定</el-button>
                        </div>
                    </el-dialog>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageData.nowPage"
                :page-sizes="[3, 5, 8, 10]"
                :page-size="3"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {createNamespacedHelpers} from 'vuex';
    const {mapActions,mapState,mapMutations} = createNamespacedHelpers('customers')
    export default {
        data() {
            return {
                dialogFormVisible: false,
                formLabelWidth: '120px',
                customer:{},
                searchData: {
                    type: "name",
                    value: "",
                },
            };
        },
        watch: {
            searchData: {
                handler(val) {
                    this.getCustomers(val);
                },
                deep: true,
            },
        },
        created(){
            this.getCustomers(this.searchData)
        },
        methods: {
            ...mapActions(['getCustomers','deleteCustomers',"sureAlterCustomers"]),
            ...mapMutations(['changeOnePageData']),
            delCustomers(_id){
                this.deleteCustomers(_id);
                this.getCustomers(this.searchData)
            },
            saveCustomer(data){
                this.customer = data;
                this.dialogFormVisible = true
            },
            sureAlter(data){
                this.dialogFormVisible = false;
                this.sureAlterCustomers(data)
            },
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);d
                this.changeOnePageData(val)
                this.getCustomers(this.searchData);
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.getCustomers({nowPage:val, ...this.searchData});
            },
        },
        computed:{
            ...mapState(['allCustomers',"pageData"])
        }
    }
</script>

<style>
.cell{
    text-align: center;
}
</style>